<template>
  <div class="box1"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { three, CylinderApi, CuboidApi, fn } from "./APP.js";
import { mergeBufferGeometries } from "three/examples/jsm/utils/BufferGeometryUtils";
// 引入three.js
import * as THREE from "three";
// l;
// const sum = ref(null);

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
// 设置canvas画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将画布部署到html元素上

// 背景颜色
renderer.setClearColor(0x444444, 1);
// 添加轨道控制器扩展库
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
onMounted(() => {
  // ---------------------------------------------------------------------三维场景-------------------------------
  // 创建三维场景
  const scene = new THREE.Scene();
  // 创建一个4x4矩阵对象
  const mat4 = new THREE.Matrix4();
  let mesh;

  // for (let i = 0; i <= 10000; i++) {
  three.map((val) => {
    if (val.Type == "Cylinder") {
      mesh = CylinderApi(val);
    } else if (val.Type == "Cuboid") {
      mesh = CuboidApi(val);
    }
    // scene.add(mesh);
  });
  // }
  // const api = fn();
  // console.log(api);
  // // const color = new THREE.Color(
  // //   `rgb(${val.Color.R},${val.Color.G},${val.Color.B})`
  // // );
  // const material = new THREE.MeshBasicMaterial({
  //   color: "red",
  //   wireframe: true,
  // });
  // // 合并模型
  // let merged = mergeBufferGeometries(api[0], true);
  // let mergeMesh = new THREE.Mesh(merged, api[1]);
  // // scene.add(mergeMesh);
  // scene.add(new THREE.Mesh(merged, material));

  document.querySelector(".box1").appendChild(renderer.domElement);
  // --------------------------------------------------------------------相机--------------------------------
  // 实例化透视投影相机
  // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
  const camera = new THREE.PerspectiveCamera(
    30,
    window.innerWidth / window.innerHeight,
    0.1,
    5000
  );
  // 设置相机位置
  camera.position.set(180, 180, 200);
  // 设置相机观察目标
  camera.lookAt(0, 0, 0);
  // --------------------------------------------------------------------渲染器----------------------------------

  // --------------------------------------------------------------------辅助坐标系------------------------------
  // 添加辅助坐标系
  const axesHelper = new THREE.AxesHelper(200);
  // 将坐标系添加到场景中
  scene.add(axesHelper);
  // ------------------------------------------------------------------轨道控制器-------------------------------
  // 设置轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  // 设置带阻尼的惯性
  controls.enableDamping = true; //鼠标松开不会立刻停下来
  // 设置阻尼系数
  controls.dampingFactor = 0.05;
  // ----------------------------------------------------------渲染函数-----------------------------------
  window.addEventListener("resize", () => {
    // 重置渲染器宽高比
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
  });

  // 构建渲染函数
  function animate() {
    // 侦听轨道控制器
    controls.update();
    // 请求动画帧函数,辅助实现WebGPU的动画效果
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
});
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
